<script setup lang="ts">
import LineHeader from '@/components/LineHeader.vue'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { changePassword, getUserInfo } from '@/apis/setting'
import { useUserStore } from '@/stores'

interface UserSettingForm {
  username: string
  newPassword: string
  confirmPassword: string
}

const formSize = ref<ComponentSize>('default')
const userSettingFormRef = ref<FormInstance>()
const userSettingForm = reactive<UserSettingForm>({
  username: '',
  newPassword: '',
  confirmPassword: '',
})

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请确认密码'))
  } else if (value != userSettingForm.newPassword) {
    callback(new Error('两次输入的密码不一致!'))
  } else {
    callback()
  }
}

const userSettingRules = reactive<FormRules<UserSettingForm>>({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
  ],
  newPassword: [
    {
      required: true,
      message: '请输入新密码',
      trigger: 'blur',
    },
  ],
  confirmPassword: [
    {
      validator: validatePass,
      required: true,
      trigger: 'blur',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!')

      const userStore = useUserStore()
      const res = await changePassword(
        userStore.userInfo.request_data.username,
        userSettingForm.confirmPassword,
      )

      if (res.status == 200) {
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        userSettingForm.newPassword = ''
        userSettingForm.confirmPassword = ''
      } else {
        ElMessage({
          message: '修改失败',
          type: 'error',
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

onMounted(async () => {
  const userStore = useUserStore()
  const res = await getUserInfo(userStore.userInfo.request_data.username)
  userSettingForm.username = userStore.userInfo.request_data.username
  console.log(res)
})
</script>
<template>
  <div id="setting">
    <LineHeader>
      <template #text>用户设置</template>
    </LineHeader>

    <div class="user-setting">
      <el-form
        ref="userSettingFormRef"
        style="max-width: 600px"
        :model="userSettingForm"
        :rules="userSettingRules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userSettingForm.username" disabled />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="userSettingForm.newPassword" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="userSettingForm.confirmPassword" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(userSettingFormRef)">修改信息</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style scoped lang="scss">
#setting {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px 32px;
  box-sizing: border-box;
}
</style>
